<template>
	<div>
		<p>
			clicked: {{ $store.state.count }} times, count is
			{{ $store.getters.oddOrEven }}
		</p>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementIfOdd">increment if odd</button>
		<button @click="incrementAsync">increment async</button>
	</div>
</template>

<script>
/*
  1. 读取vuex数据
    this.$store.state.xxx
  2. 更新vuex数据
    this.$store.dispatch("xxx");
*/
export default {
	name: "App",
	mounted() {
		// dispatch commit getters state
		// console.log(this.$store);
	},
	methods: {
		increment() {
			// 触发vuex的action函数 --> action函数调用时会调用commit方法 --> 触发mutation函数
			// --> 直接更新state数据 --> 数据是响应式的，用户界面自动更新
			// dispatch方法只能接受两个参数，第一个是action函数名称，第二个是action函数的参数
			// this.$store.dispatch("increment", 3);
			this.$store.commit("INCREMENT", 3);
			// this.$store.dispatch("increment", { name: "jack", age: 18 });
			// this.$store.dispatch("increment", [1, 2, 3, 4, 5]);
		},
		decrement() {
			// 开发中，如果更新vuex不需要异步操作，就不用action函数
			// 直接触发mutation函数
			this.$store.commit("DECREMENT", 3);
			// this.$store.dispatch("decrement", 3);
		},
		incrementIfOdd() {
			if ((this.$store.state.count & 1) === 1) {
				this.$store.commit("INCREMENT", 3);
			}
		},
		incrementAsync() {
			this.$store.dispatch("incrementAsync", 3);
		},
	},
};
</script>

<style></style>
